<template>
    <div>
        <div id="main1" style="height: 300px;"></div>
        <div id="main2" style="height: 300px;"></div>
    </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
var series = [
    {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        stack: 'a',
        name: 'a'
    },
    {
        data: [10, 46, 64, '-', 0, '-', 0],
        type: 'bar',
        stack: 'a',
        name: 'b'
    },
    {
        data: [30, '-', 0, 20, 10, '-', 0],
        type: 'bar',
        stack: 'a',
        name: 'c'
    },
    {
        data: [30, '-', 0, 20, 10, '-', 0],
        type: 'bar',
        stack: 'b',
        name: 'd'
    },
    {
        data: [10, 20, 150, 0, '-', 50, 10],
        type: 'bar',
        stack: 'b',
        name: 'e'
    }
];

const stackInfo: { [key: string]: { stackStart: number[], stackEnd: number[] } } = {};
for (let i = 0; i < series[0].data.length; ++i) {
    for (let j = 0; j < series.length; ++j) {
        const stackName = series[j].stack;
        if (!stackName) {
            continue;
        }
        if (!stackInfo[stackName]) {
            stackInfo[stackName] = {
                stackStart: [],
                stackEnd: []
            };
        }
        const info = stackInfo[stackName];
        const data = series[j].data[i];
        if (data && data !== '-') {
            if (info.stackStart[i] == null) {
                info.stackStart[i] = j;
            }
            info.stackEnd[i] = j;
        }
    }
}
for (let i = 0; i < series.length; ++i) {
    const data = series[i].data as number[] | { value: number, itemStyle: object }[];
    const info = stackInfo[series[i].stack];
    for (let j = 0; j < series[i].data.length; ++j) {
        // const isStart = info.stackStart[j] === i;
        const isEnd = info.stackEnd[j] === i;
        const topBorder = isEnd ? 20 : 0;
        const bottomBorder = 0;
        data[j] = {
            value: data[j] as number,
            itemStyle: {
                borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
            }
        };
    }
}

var option1 = {
    title: {
        text: "安全隐患："
    },
    xAxis: {
        type: 'category',
        data: ['作业准备', '模板加工', '脚手架基础']
    },
    yAxis: {
        type: 'value'
    },
    series: series as any
};
var option2 = {
    title: {
        text: "质量隐患："
    },
    xAxis: {
        data: ['起重机械安拆', '脚手架工程', '临时电梯', '砌体工程', '模板']
    },
    yAxis: {},
    series: [
        {
            type: 'bar',
            data: [
                10,
                22,
                28,
                {
                    value: 43,
                    // 设置单个柱子的样式
                    itemStyle: {
                        color: '#91cc75',
                        shadowColor: '#91cc75',
                        borderType: 'dashed',
                        opacity: 0.5
                    }
                },
                49
            ],
            itemStyle: {
                barBorderRadius: 5,
                borderWidth: 1,
                borderType: 'solid',
                borderColor: '#73c0de',
                shadowColor: '#5470c6',
                shadowBlur: 3
            }
        }
    ]
};

onMounted(() => {
    var myChart = echarts.init(document.getElementById('main1'));
    // 绘制图表
    myChart.setOption(option1);
    var myChart = echarts.init(document.getElementById('main2'));
    // 绘制图表
    myChart.setOption(option2);
});
</script>